<template>
  <MyCard title="预约渠道数据统计">
    <div class="charts" ref="charts"></div>
  </MyCard>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
const charts = ref();

const data = [
  { value: 40, name: '智慧文旅平台', percentage: '40%' },
  { value: 10, name: '携程', percentage: '10%' },
  { value: 20, name: '飞猪', percentage: '20%' },
  { value: 30, name: '其他渠道', percentage: '30%' },
];

onMounted(() => {
  const myCharts = echarts.init(charts.value);
  const option = {
    tooltip: {
      formatter: '{a} <br/>{b} : {c}%',
    },
    series: [
      {
        name: 'Pressure',
        type: 'gauge',
        progress: {
          show: true,
        },
        detail: {
          valueAnimation: true,
          formatter: '{value}',
        },
        data: [
          {
            value: 50,
            name: 'SCORE',
          },
        ],
      },
    ],
  };
  myCharts.setOption(option);
});
</script>

<style lang="scss" scoped>
.charts {
  flex: auto;
}
</style>
